<template>
  <div>

    <div style="margin:10px 0">
      <el-input style="width:200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
      <el-button type="primary" class="ml-5" @click="load">搜索</el-button>
      <el-button type="waring" class="ml-5" @click="rest">重置</el-button>
   </div>
    <!--    <div style="margin:10px 0">
         <el-button type="primary" class="ml-5" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
         <el-popconfirm
           class="ml-5"
           confirm-button-text='确定'
           cancel-button-text='取消'
           icon="el-icon-info"
           icon-color="red"
           title="确定删除吗？"
           @confirm="deleteBatch"
         >
           <el-button type="danger" class="ml-5" slot="reference">批量修改<i class="el-icon-remove-outline"></i></el-button>

         </el-popconfirm>
       </div>-->
       <el-table :data="tableData" border stripe :header-cell-style="{background:'#ccc'}" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55">
         </el-table-column>
         <el-table-column prop="id" label="id" width="140">
         </el-table-column>
         <el-table-column prop="number" label="编号" width="120">
         </el-table-column>
         <el-table-column prop="goodsName" label="商品名称" width="120">
         </el-table-column>
         <el-table-column prop="goodsType" label="商品类型" width="120">
         </el-table-column>
         <el-table-column prop="orderNum" label="订单编号" width="120">
         </el-table-column>
         <el-table-column prop="putTime" label="入库时间" width="120">
         </el-table-column>
         <el-table-column prop="outTime" label="出库时间" width="120">
         </el-table-column>
         <el-table-column prop="makeType" label="操作类型" width="120">
         </el-table-column>
         <el-table-column prop="workUser" label="操作人" width="120">
         </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
             <el-popconfirm
               class="ml-5"
               confirm-button-text='确定'
               cancel-button-text='取消'
               icon="el-icon-info"
               icon-color="red"
               title="确定删除吗？"
               @confirm="handleDel(scope.row.id)"
             >
               <el-button type="danger" slot="reference">删除<i class="el-icon-delete"></i></el-button>
             </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
       <div style="padding :10px 0">
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :page-sizes="[3, 4, 8, 10]"
           :current-page="pageNum"
           :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
         </el-pagination>
       </div>
       <!-- 添加/修改弹窗-->
    <el-dialog title="角色信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px" size="small">
        <el-form-item label="名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="唯一标识">
          <el-input v-model="form.flag" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="菜单分配" :visible.sync="menuFormVisible" width="30%">
      <el-tree
        :props="props"
        :data="menuData"
        show-checkbox
        node-key="id"
        :default-expanded-keys="expends"
        :default-checked-keys="checks"
        ref="tree">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span><i :class="data.icon"></i> {{ data.name }}</span>
         </span>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="menuFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRoleMenu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {wareHouseList} from "../../api/wareHouse";

export default {
  name: "Out",
  data(){
    return {
      tableData: [],
      total:0,//分页总条
      pageNum:1,//页数
      pageSize:8,//每页条数
      name:"",//模糊查字段
      dialogFormVisible:false,
      menuFormVisible:false,
      multipleSelection:[],
      form:{},
      menuData:[],
      props: {
        label: 'name',
      },
      expends: [],
      checks: [],
      roleId: 0,
      roleFlag: '',
      ids: []
    }
  },
  created() {
    this.load()
  },
  methods:{
    //查询
    load(){
      let params={
        pageNum:this.pageNum,
          pageSize: this.pageSize,
      }
      wareHouseList(params).then(res=>{
        debugger
        this.tableData = res.data.records
        this.total = res.data.total
      })

    },
    //重置
    rest(){
      this.name="",
        this.load()
    },
    handleEdit(row) {
      // this.form = row //会出现表格展示数据随着弹窗改变而改变
      this.form = JSON.parse(JSON.stringify(row)) //深拷贝
      // this.form = Object.assign({},row) //将row数据拷贝到空对象中
      // this.form = {...row} //将运算符后面的变量里东西每一项拆下来。
      // console.log({...row});
      this.dialogFormVisible = true
    },
    //分页
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum=pageNum
      this.load()
    },
    //打开弹窗
    handleAdd(){
      this.dialogFormVisible = true
      this.form = {}
    },
    //添加 or 修改
    save(){
      request.post("role",this.form).then(res=>{
        if (res.code === '200') {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    //删除
    handleDel(id){
      request.delete("/role/"+id).then(res=>{
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    //头部选中
    handleSelectionChange(val){
      console.log(val)
      this.multipleSelection = val
    },
    //批量删除
    deleteBatch(){
      let ids = this.multipleSelection.map(v => v.id) //原数组有对象把对象数组转换成纯id数组
      request.post("/role/deleteBatch",ids).then(res=>{
        if (res.code === '200') {
          this.$message.success("批量删除成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },
    selectMenu(role){
      console.log(role)

      this.roleId = role.id
      this.roleFlag = role.flag

      // 请求菜单数据
      request.get("/menu").then(res=>{
        console.log(res)
        this.menuData = res.data
        // 把后台返回的菜单数据处理成 id数组
        this.expends = this.menuData.map(v => v.id)
      })

      request.get("/role/roleMenu/" + this.roleId).then(res=>{
        this.checks = res.data
        console.log(this.checks)

        this.ids.forEach(id => {
          if (!this.checks.includes(id)) {
            // 可能会报错：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setChecked')
            this.$nextTick(() => {
              this.$refs.tree.setChecked(id, false)
            })
          }
        })
        this.menuFormVisible = true
      })
    },

    saveRoleMenu() {
      this.request.post("/role/roleMenu/" + this.roleId, this.$refs.tree.getCheckedKeys()).then(res => {
        if (res.code === '200') {
          this.$message.success("绑定成功")
          this.menuFormVisible = false
          // 操作管理员角色后需要重新登录
          if (this.roleFlag === 'ROLE_ADMIN') {
            this.$store.commit("logout")
          }
        }else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
